<template>
  <div class="relative h-full">
    <div class="absolute left-5 top-4 z-20" @click="visible = true">
      <Category color="#fff" width="1.5rem" height="1.5rem" />
    </div>
    <Navbar
      v-model:visible="visible"
      :dataSource="videoList"
      @select="selectMenu"
      @update:visible="changeVisible"
    />
    <Loading :visible="videoLoading" :status="isClick" @submit="handleClick"></Loading>
    <div class="absolute inset-0 overflow-hidden">
      <div class="video-wrapper bg-dark-200 h-full flex items-center">
          <video
            class="w-full h-full"
            ref="videoInstance"
            controls
            playsinline
            @canplay="canplay"
            @durationchange="canplay"
            :src="videoList[videoListCurrentIndex].video_url"
          ></video>
        </div>
    </div>
  </div>
</template>

<script setup>
import { Category } from "@nutui/icons-vue";
import Navbar from "./components/nav-bar.vue";
import Loading from "./components/loading.vue";
import { watch } from 'vue'
const videoList = ref([
  {
    id: 1,
    video_name: "驾校环境",
    video_url:
      "https://7463-tcb-marywaaw2hsptpp-6c6r32192958-1316826346.tcb.qcloud.la/sass_h5_temp_static_test/xinhe_video/驾校环境2.mp4",
  },
  {
    id: 2,
    video_name: "训练场地",
    video_url: "https://7463-tcb-marywaaw2hsptpp-6c6r32192958-1316826346.tcb.qcloud.la/sass_h5_temp_static_test/xinhe_video/训练场地普通模板.mp4",
  },
  {
    id: 3,
    video_name: "教学氛围",
    video_url:
      "https://7463-tcb-marywaaw2hsptpp-6c6r32192958-1316826346.tcb.qcloud.la/sass_h5_temp_static_test/xinhe_video/教学氛围.mp4",
  },
  {
    id: 4,
    video_name: "教育设施",
    video_url: "https://7463-tcb-marywaaw2hsptpp-6c6r32192958-1316826346.tcb.qcloud.la/sass_h5_temp_static_test/xinhe_video/教育设施.mp4",
  },
  {
    id: 5,
    video_name: "服务团队",
    video_url: "https://7463-tcb-marywaaw2hsptpp-6c6r32192958-1316826346.tcb.qcloud.la/sass_h5_temp_static_test/xinhe_video/服务团队（普通版） (1).mp4",
  },
  {
    id: 6,
    video_name: "驾校班型",
    video_url: "https://7463-tcb-marywaaw2hsptpp-6c6r32192958-1316826346.tcb.qcloud.la/sass_h5_temp_static_test/xinhe_video/驾校班型.mp4",
  },
]);
const visible = ref(false); // 目录菜单显示隐藏
const videoListCurrentIndex = ref(0); // 当前播放视频索引
const videoLoading = ref(true); // 加载遮罩
const isLoad = ref(false); // 是否加载完成
const isClick = ref(false); // 是否有教交互
const videoInstance = ref(null); // 播放器实例

watch([() => isLoad.value, () => isClick.value], ([isLoad, isClick]) => {
  if(isLoad && isClick) {
    videoInstance.value.play()
    videoLoading.value = false
  } else {
    videoLoading.value = true
  }
})

// 控制菜单关闭和显示
const changeVisible = (val) => {
  visible.value = val;
};
// 选择菜单
const selectMenu = (index) => {
  videoListCurrentIndex.value = index;
  // videoInstance.value.load()
  // isPlay.value = false;
  // videoLoading.value = true;
  isClick.value = false;
  isLoad.value = false;
};

// 可以播放,去掉遮罩层
const canplay = (e) => {
  if(e.isTrusted) {
    isLoad.value = true;
  }
};
// 遮罩点击播放
const handleClick = () => {
  isClick.value = true;
  videoInstance.value?.play()
}

</script>
